<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline">
          <i class="el-icon-search btn-search" @click="handleShowSearch()" />
          <div class="btn-box">
            <el-button
              v-if="showCheckboxDownload"
              type="warning"
              @click="downloadSettlement"
            >
              下载结算单
            </el-button>
            <a
              class="el-button el-button--success el-button--medium"
              href="http://123.57.59.222:8081/api/file/course_supplier_settlement_template.xlsx"
              type="primary"
            >模版下载</a>
            <el-upload
              :action="UploadUrl()"
              :show-file-list="false"

              :on-success="handleImageSuccess"

              class="upload_image"
            >
              <el-button v-show="roleName==&quot;admin&quot;" type="primary">导入</el-button>
            </el-upload>
            <el-button
              :disabled="list.length<=0"

              type="primary"
              icon="el-icon-document"
              @click="dowloadExcel()"
            >导出excel</el-button>
          </div>
          <div v-show="showbtns==true" class="search-lf" style="width:70%">
            <el-form-item width="200px" label="供应商名称">
              <el-input v-model="listQuery.supplierName" placeholder="供应商名称" />
            </el-form-item>
            <el-form-item label="po单号">
              <el-input v-model="listQuery.po" placeholder="po单号" />
            </el-form-item>
            <el-form-item label="课程编导">
              <el-select v-model="listQuery.courseChargeName" filterable placeholder="请选择">
                <el-option
                  v-for="item in courseChargeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="课程名称">
              <el-input v-model="listQuery.courseName" placeholder="课程名称" />
            </el-form-item>
            <el-form-item label="支付状态">
              <el-select v-model="listQuery.paymentStateName" filterable placeholder="请选择" @change="handlePaymentState($event)">
                <el-option
                  v-for="item in payMents"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="税点">
              <el-input v-model="listQuery.taxPoint" placeholder="税点" />
            </el-form-item>
            <el-form-item style="width:10px">
              <el-button type="primary" plain @click="getList()">查询</el-button>

            </el-form-item>

          </div>

        </el-form>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane label="未下载" name="noDownload" />
          <el-tab-pane label="未结算" name="noSettlement" />
          <el-tab-pane label="已结算" name="settlement" />
        </el-tabs>

        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          border
          height="650px"
          :data="list"
          fit
          highlight-current-row
          style="width: 100%"
          :row-key="getRowKey"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            v-if="showCheckboxDownload"
            type="selection"
            width="55"
            :reserve-selection="true"
          />
          <el-table-column align="center" width="60px" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.$index+1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="130px" label="PO单号">
            <template slot-scope="{row}">
              <span>{{ row.po }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="课程ID">
            <template slot-scope="{row}">
              <span>{{ row.courseId }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="课程名称">
            <template slot-scope="{row}">
              <span>{{ row.courseName }}</span>
            </template>
          </el-table-column>
          <el-table-column sort align="center" label="课程编导">
            <template slot-scope="{row}">
              <span>{{ row.courseChargeName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="供应商类型">
            <template slot-scope="{row}">
              <span>{{ row.supplierTypeName }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" width="200" label="供应商名称">
            <template slot-scope="{row}">
              <span>{{ row.supplierName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="200px" label="客户名称">
            <template slot-scope="{row}">
              <span>{{ row.customerName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="合同金额">
            <template slot-scope="{row}">
              <span>{{ row.poContractAmount }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="服务类型">
            <template slot-scope="{row}">
              <span>{{ row.serviceTypeName }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" width="120px" label="已交付时长">
            <template slot-scope="{row}">
              <span>{{ row.contractFinishedTimeLength }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="单价">
            <template slot-scope="{row}">
              <span>{{ row.unitPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量">
            <template slot-scope="{row}">
              <span>{{ row.quantity }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="预估成本">
            <template slot-scope="{row}">
              <span>{{ row.estimatedGenerationCost }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="已支付">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-input v-model="settlementList.supplierPaidAmount" />
              </template>
              <span v-else>{{ row.supplierPaidAmount }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="未支付">
            <template slot-scope="{row}">
              <span>{{ row.supplierUnpaidAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="实际单价">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-input v-model="settlementList.actualUnitPrice" />
              </template>
              <span v-else>{{ row.actualUnitPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="实际数量">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-input v-model="settlementList.actualQuantity" />
              </template>
              <span v-else>{{ row.actualQuantity }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="其他费用">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-input v-model="settlementList.otherExpenses" />
              </template>
              <span v-else>{{ row.otherExpenses }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="实际总成本">
            <template slot-scope="{row}">
              <span>{{ row.actualTotalCost }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="160px" label="实际时长">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-input
                  v-model="settlementList.actualTimeLength"
                  placeholder="hh:mm:ss格式"
                />
                <!-- <el-input v-model="settlementList.actualTimeLength" /> -->
              </template>
              <span v-else>{{ row.actualTimeLength }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column align="center" width="100px" label="实际支付">
        <template slot-scope="{row}">
          <span>{{ row.contractPurchaseAmount }}</span>
        </template>
      </el-table-column> -->
          <el-table-column align="center" label="支付状态">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-select v-model="settlementList.paymentStateName" filterable placeholder="请选择" @change="handlePaymentState($event)">
                  <el-option
                    v-for="item in payMents"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>

              </template>
              <span v-else>{{ row. paymentStateName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发票类型">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <!-- <el-input v-model="settlementList.invoiceTypeName"/> -->
                <el-select
                  v-model="settlementList.invoiceTypeName"
                  filterable
                  placeholder="请选择"
                  @change="handleChangePro7($event)"
                >
                  <el-option
                    v-for="item in invoiceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </template>
              <span v-else>{{ row.invoiceTypeName }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="税点">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-input v-model="settlementList.taxPoint" />
              </template>
              <span v-else>{{ row.taxPoint }}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" width="100px" label="拍摄素材">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <!-- <el-input /> -->
                <el-select v-model="settlementList.shootSourceMaterial" filterable>
                  <el-option label="有" value="true" />
                  <el-option label="无" value="false" />
                </el-select>
              </template>
              <span v-else>{{ row.shootSourceMaterial }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="工程归档">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-select v-model="settlementList.projectFiling" filterable>
                  <el-option label="有" value="true" />
                  <el-option label="无" value="false" />
                </el-select>
              </template>
              <span v-else>{{ row.projectFiling |statusColorFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="净版归档">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-select v-model="settlementList.pureFiling" filterable>
                  <el-option label="有" value="true" />
                  <el-option label="无" value="false" />
                </el-select>
              </template>
              <span v-else>{{ row.pureFiling |statusColorFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="归档时间">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-date-picker
                  v-model=" settlementList.filingDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy/MM/dd"
                  value-format="yyyy/MM/dd"
                />
              </template>
              <span v-else>{{ row.filingDate }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="120px" label="预估结算日期">
            <template slot-scope="{row}">
              <span>{{ row.estimatedSettlementDate }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="结款日期">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-date-picker
                  v-model=" settlementList.settlementDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy/MM/dd"
                  value-format="yyyy/MM/dd"
                />
              </template>
              <span v-else>{{ row.settlementDate }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="更新日期">
            <template slot-scope="{row}">
              <template v-if="row.rowEdit">
                <el-date-picker
                  v-model=" settlementList.updateTime"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy/MM/dd"
                  value-format="yyyy/MM/dd"
                />
              </template>
              <span v-else>{{ row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="240">
            <template slot-scope="{row}">
              <el-button
                v-show="isRolds==0"
                type="warning"
                :disabled="row.state==1"
                size="mini"
                icon="el-icon-edit"
                @click="handleAdd(row)"
              >入库</el-button>
              <el-button
                v-if="row.rowEdit"
                type="success"
                size="mini"
                icon="el-icon-circle-check-outline"
                @click="confirmRole(row)"
              >保存</el-button>

              <el-button
                v-else
                type="primary"
                :disabled="row.state==1"
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(row)"
              >编辑</el-button>

              <el-button
                v-if="isSettleDelete"
                :disabled="row.state==1"
                class="mg-l"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleSettleDel(row.id)"
              >删除</el-button>
              <el-button
                v-else
                :disabled="row.state==1"
                class="mg-l"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleDel(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>=20"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" height="600px" width="70%" :title="dialogType==='edit'?'入库单':'入库单'">
      <el-form ref="poesList" label-width="100px" class="rk_form" :model="poesList" label-position="right">
        <el-row>
          <el-col class="col-border-ru">
            <div class="part1">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="入库ID">
                    <span style="color:#429EFF">{{ poesList.id }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="PO单号">

                    <span style="color:#429EFF">{{ poesList.po }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="客户名称">
                    <!-- <el-input v-model="poesList.customerName" /> -->

                    <span style="color:#429EFF">{{ poesList.customerName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程编导">
                    <span style="color:#429EFF">{{ poesList.courseChargeName }}</span>
                  </el-form-item>

                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="课程ID">
                    <span style="color:#429EFF">{{ poesList.courseId }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程名称">
                    <span style="color:#429EFF">{{ poesList.courseName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">

                  <el-form-item label="专业分类">
                    <span style="color:#429EFF">{{ poesList.majorCategory }}</span>
                  </el-form-item>

                </el-col>
                <el-col :span="12">
                  <el-form-item label="学科门类">
                    <span style="color:#429EFF">{{ poesList.subjectCategoryName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="省份">
                    <!-- <el-input v-model="poesList.provinceName" /> -->

                    <span style="color:#429EFF">{{ poesList.provinceName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程质量评级">
                    <el-rate v-model="poesList.courseQualityEvaluation" />
                  </el-form-item>
                </el-col>

              </el-row>
              <el-form-item label="讲师">
                <el-input v-model="poesList.teacher" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="拍摄形式">
                <el-input v-model="poesList.inShootMode" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="课程质量评语">
                <el-input v-model="poesList.courseQualityComment" />
              </el-form-item>
            </div>
            <!-- <el-form-item label="入库基本信息"></el-form-item> -->
            <div class="part_title">
              <span>入库基本信息</span>
              <i class="span_border" />
              <!-- <span class="title_bor"></span> -->
            </div>
            <div class="ru_border">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="提供人">
                    <el-input v-model="poesList.inProvider" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="提供方式">
                    <el-input v-model="poesList.inProvideMode" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="提供日期">
                    <el-date-picker
                      v-model="poesList.inProvideDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="100px" label="可结款日期">
                    <el-date-picker
                      v-model="poesList.inSettlementDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label-width="100px" label="视频存档URL">
                <el-input v-model="poesList.inVideoUrl" placeholder="请输入视频存档URL" />
              </el-form-item>
              <el-form-item label-width="100px" label="工程存档URL">
                <el-input v-model="poesList.inProjectUrl" placeholder="请输入工程存档URL " />
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label-width="110px" label="实际时长">
                    <span style="color:#429EFF">{{ poesList.actualTimeLength }}</span>
                    <!-- <el-input disabled v-model="poesList.actualTimeLength" placeholder="请输入 " /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="100px" label="约定售后期限">
                    <!-- <el-input v-model="poesList." placeholder="请输入 " /> -->
                    <el-date-picker
                      v-model="poesList.inAfterSaleTimeLimit"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="课程备注">
                <el-input v-model="poesList.inCourseLibRemark" placeholder="请输入 " />
              </el-form-item>
            </div>
          </el-col>

          <el-col class="col-birder-r">

            <div class="part_title">
              <span>状态反馈信息</span>
              <i class="span_border" />

            </div>
            <div class="ru_border">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="开始下载时间">
                    <el-input v-model="poesList.feedbackDownloadStartTime" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完成下载时间">
                    <el-input v-model="poesList.feedbackDownloadEndTime" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="课程核对状态">
                <el-input v-model="poesList.feedbackCourseCheckState" placeholder="请输入 " />
              </el-form-item>
              <el-form-item label="课程反馈状态">
                <el-input v-model="poesList.feedbackCourseState" placeholder="请输入 " />
              </el-form-item>
              <el-form-item label="ERP反馈状态">
                <el-input v-model="poesList.feedbackErpState" placeholder="请输入 " />
              </el-form-item>
            </div>

            <div class="part_title">
              <span>供应商信息</span>
              <i class="span_border" />

            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item class="label-pos" label="供应商名称">
                  <span style="color:#429EFF">{{ poesList.supplierName }}</span>
                  <!-- <el-input v-model="" disabled placeholder=" " /> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="label-pos" label="结款人">
                  <el-input v-model="poesList.supplierInfoPayer" placeholder=" " />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="版本信息">
                  <el-input v-model="poesList.supplierInfoVersion" placeholder="请输入 " />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="ysd_right" label="验收单">

                  <a
                    v-if="poesList.acceptanceReportPath"
                    class="el-icon-download"
                    @click="uploadPath"
                  >下载</a>
                  <a

                    v-else
                  >无</a>

                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="终版数量">
                    <el-input
                      v-model="poesList.supplierInfoEndEditionQuantity"
                      placeholder="请输入 "
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="label_center" label="净版数量">
                    <el-input v-model="poesList.supplierInfoPureQuantity" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="字幕数量">
                    <el-input
                      v-model="poesList.supplierInfoSubtitlesNumber"
                      placeholder="请输入 "
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item class="label_center" label="工程数量">
                    <el-input v-model="poesList.supplierInfoProjectNumber" placeholder="请输入 " />
                  </el-form-item>
                </el-col>
              </el-row>

            </el-row>
            <el-form-item class="label_center" label="备注信息">
              <el-input
                v-model="poesList.supplierInfoAcceptanceReportRemark"
                type="textarea"
                :rows="4"
                placeholder="请输入 "
              />
            </el-form-item>
            <div class="flex-box">
              <div class="flex-iten">
                <el-form-item label="大纲" label-width="80px">

                  <el-radio v-model="poesList.supplierInfoIsOutline" label="1">有</el-radio>
                  <el-radio v-model="poesList.supplierInfoIsOutline" label="0">无</el-radio>
                </el-form-item>
              </div>
              <div class="flex-iten">
                <el-form-item label="讲稿" class="label_center" label-width="70px">
                  <el-radio v-model="poesList.supplierInfoIsSpeech" label="1">有</el-radio>
                  <el-radio v-model="poesList.supplierInfoIsSpeech" label="0">无</el-radio>
                </el-form-item>
              </div>
              <div class="flex-iten">
                <el-form-item label="PPT" class="label_center" label-width="70px">
                  <el-radio v-model="poesList.supplierInfoIsPpt" label="1">有</el-radio>
                  <el-radio v-model="poesList.supplierInfoIsPpt" label="0">无</el-radio>
                </el-form-item>
              </div>
            </div>

          </el-col>
        </el-row>
      </el-form>
      <div style="text-align:right; margin-top:20px;">
        <el-button type="primary" @click="confirmRole">确定</el-button>
        <el-button type="danger" class="cancel_border" plain @click="dialogVisible=false">取消</el-button>

      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="showDownloadSettlement"
      width="85%"
    >

      <el-row>
        <el-col :span="24">
          <h2>生成可下载结算单</h2>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="settle_name">
            <span>结算单名称：</span><span>结算单</span></div>
        </el-col>
      </el-row>

      <table id="tableExcel" ref="excelTable" width="100%" class="settle_table">
        <thead>
          <tr>
            <th>结算单编号</th>
            <th>PO编号</th>
            <th>合同编号</th>
            <th>服务类型</th>
            <th>课程名称</th>
            <th>讲师</th>
            <th>知识点数</th>
            <th>实际时长</th>
            <th>单价</th>
            <th>数量</th>
            <th>结算方式</th>
            <th>金额</th>
            <th>备注</th>
            <th>交付时间</th>
            <th>状态</th>
            <th>乙方对接人确认</th>
            <th>课程经理确认</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in settlementDownloadList" :key="item.supplierSettlementDetail.id">
            <td>{{ item.settlementNum }}</td>
            <td>{{ item.supplierSettlementDetail.po }}</td>
            <td>{{ item.contractNo }}</td>
            <td>{{ item.supplierSettlementDetail.serviceName }}</td>
            <td>{{ item.supplierSettlementDetail.courseName }}</td>
            <td>{{ item.supplierSettlementDetail.courseChargeName }}</td>
            <td>
              <input type="text" name="knowledgePoint">
            </td>
            <td>{{ item.supplierSettlementDetail.actualTimeLength }}</td>
            <td>{{ item.supplierSettlementDetail.unitPrice }}</td>
            <td>{{ item.supplierSettlementDetail.quantity }}</td>
            <td>
              <select v-model="item.checkedStyle" name="settleStyle" class="settleStyle" @change="selectStyle(item, $event)">
                <option class="opt" value="" disabled>请选择</option>
                <option class="opt" value="1">按数量</option>
                <option class="opt" value="2">按时间</option>
              </select>
            </td>
            <td>0</td>
            <td><input type="text" name="comment"></td>
            <td>{{ item.supplierSettlementDetail.settlementDate }}</td>
            <td>已完结</td>
            <td><input type="text" name="firstSignature"></td>
            <td><input type="text" name="secondSignature"></td>
          </tr>
          <tr>
            <td colspan="4">
              合计：
            </td>
            <td colspan="3" />
            <td>{{ actualTotalTime }}</td>
            <td colspan="3" />
            <td>{{ actualTotalPrice }}</td>
            <td colspan="5" />
          </tr>
          <tr>
            <td colspan="4">
              总时长（分钟）：
            </td>
            <td colspan="13">
              {{ actualTotalTime }}
            </td>
          </tr>
          <tr>
            <td colspan="2">
              甲方名称：
            </td>
            <td colspan="6" />
            <td colspan="2">
              乙方名称：
            </td>
            <td colspan="7" />
          </tr>
          <tr>
            <td colspan="2">
              甲方签字：
            </td>
            <td colspan="6" />
            <td colspan="2">
              乙方签字及盖章：
            </td>
            <td colspan="7" />
          </tr>
          <tr>
            <td colspan="2">
              日期：
            </td>
            <td colspan="6" />
            <td colspan="2">
              日期：
            </td>
            <td colspan="7" />
          </tr>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="showDownloadSettlement = false">取 消</el-button>
        <el-button type="primary" @click="downloadExcel">
          <a id="download">
            确 定
          </a>
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  suppliersList,
  addSupplierWare,
  updatEsettlement,
  delSettlement,
  generateSettlement,
  updateSettleState
} from '@/api/supplier_settlement'
import { getShootMode, getInvoice, baseUrl2, getCourseCharge, getPaymentState } from '@/api/remote-search'
import { RegionsProvince } from '@/api/region'
import { regiosList } from '@/api/user'
import { getProvinces } from '@/api/supplier'
import { Message } from 'element-ui'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { exportMethod } from '@/utils/validate'
export default {
  name: 'Test',
  components: { Pagination },
  filters: {
    statusColorFilter(status) {
      const statusMap = {
        true: '有',
        false: '无'

      }
      return statusMap[status]
    },
    statusFilter(status) {
      const statusMap = {
        1: '进行中',
        2: '已完成',
        3: '已过期',
        0: '新合同'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      roleName: sessionStorage.getItem('memberName'),
      uploadUrl: '',
      showbtns: false,
      isRolds: sessionStorage.getItem('roids'),
      list: [], editDisabled: false,
      payMents: [], // 支付状态
      courseChargeList: [], // 课程编导
      provinceList: [], // 战区下面省份
      allProvinceList: [], // 所有省份
      regiosList: [], // 战区
      downloadLoading: false,
      rowEdit: false,
      poesList: {},
      settlementList: {}, // 编辑的集合
      total: 0,
      dataObj: { id: '' },
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem('token'),
        page: 1,
        customerName: '',
        regionName: '',
        supplierName: '',
        po: '',
        courseName: '',
        paymentStateName: '',
        taxPoint: '',
        courseChargeName: '',
        state: '',
        pageSize: 20
      },
      ispath: false,
      invoiceList: [], // 发票类型
      shootModeList: [], // 拍摄形式
      dialogVisible: false,
      dialogType: 'new',
      checkStrictly: false,
      rqId: '',
      ids: '',
      activeName: 'all',
      showDownloadSettlement: false,
      multipleSelection: '',
      idsPo: '',
      showCheckboxDownload: false,
      settlementDownloadList: '',
      actualTotalTime: 0,
      actualTotalPrice: 0,
      itemsPrice: {},
      isSettleDelete: false
    }
  },
  computed: {},
  created() {
    this.getList()
    this.getListes()
    this.listQuery.poCourseId = this.$route.query.id
  },
  methods: {
    handleImageSuccess(file) {
      if (file.code === 200) {
        this.$message.success(file.message)
        this.getList()
      } else {
        this.$message.error(file.message)
      }
    },
    UploadUrl() {
      return baseUrl2 + '/api/file/import_settlement_list'
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns
    },
    dowloadExcel() {
      exportMethod(this.listQuery)
    },
    handleChangePro4(id) {
      let obj = {}
      obj = this.regiosList.find((item) => {
        return item.region === id
      })
      this.contractList.regionId = obj.id
      RegionsProvince(obj.id).then((res) => {
        this.provinceList = res.data.data
      })
    },
    uploadPath() {
      window.location.href =
        baseUrl2 + '/api/file/download' + this.poesList.acceptanceReportPath
    },
    getListes() {
      getProvinces().then((res) => {
        this.allProvinceList = res.data.data
      })
      getPaymentState().then(res => {
        this.payMents = res.data.data
      })
      getCourseCharge().then((res) => {
        this.courseChargeList = res.data.data
      })
      regiosList().then((res) => {
        this.regiosList = res.data.data
      })
      getShootMode().then((res) => {
        this.shootModeList = res.data.data
      })
      getInvoice().then((res) => {
        this.invoiceList = res.data.data
      })
    },
    handleChangePro7(id) {
      let obj = {}
      obj = this.invoiceList.find((item) => {
        return item.name === id
      })
      this.settlementList.invoiceTypeId = obj.id
    },
    handlePaymentState(id) {
      let obj = {}
      obj = this.payMents.find((item) => {
        return item.name === id
      })
      this.settlementList.paymentStateId = obj.id
    },
    getList() {
      this.editDisabled = false
      this.listLoading = true
      suppliersList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleDel(id) {
      this.$confirm('确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          delSettlement(id).then((res) => {
            if (res.data.code === '200') {
              this.$message.success(res.data.message)
              this.getList()
            } else {
              this.$message.error(res.data.message)
            }
          })
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSettleDel(id) {
      updateSettleState({
        ids: id,
        state: 2
      }).then(res => {
        if (res.data.code === 200) {
          this.getList()
        }
      })
    },
    handlenewContract() {
      this.dialogType = 'new'
      this.dialogVisible = true
      // this.poesList='';
    },
    beforeUpload(file) {
      this.dataObj.id = this.rqId
    },
    handleEdit(row) {
      this.editDisabled = true
      this.dialogType = 'edit'
      this.settlementList = row
      row.rowEdit = true
      this.poesList = row
      this.rqId = row.id
      // this.userId = scope.id;
    },
    handleAdd(row) {
      this.dialogType = 'new'
      this.dialogVisible = true

      this.poesList.po = row.po
      this.poesList.id = row.id
      this.poesList.customerName = row.customerName
      this.poesList.provinceName = row.provinceName
      this.poesList.courseChargeName = row.courseChargeName
      this.poesList.courseName = row.courseName
      this.poesList.courseId = row.courseId
      this.poesList.subjectCategoryName = row.subjectCategoryName
      this.poesList.majorCategory = row.majorCategory
      this.poesList.actualTimeLength = row.actualTimeLength
      this.poesList.acceptanceReportPath = row.acceptanceReportPath

      this.poesList.supplierSettlementId = row.id
      if (this.poesList.acceptanceReportPath == null) {
        this.ispath = false
      } else {
        this.ispath = true
      }
    },
    confirmRole(row, id) {
      const isEdit = this.dialogType === 'edit'
      this.settlementList.rowEdit = false
      if (isEdit) {
        if (this.settlementList.actualTimeLength) {
          var regS = new RegExp('\\：', 'g')
          this.settlementList.actualTimeLength = this.settlementList.actualTimeLength.replace(
            regS,
            ':'
          )
        }
        updatEsettlement(this.settlementList).then((res) => {
          if (res.data.code === '200') {
            this.$message.success(res.data.message)
            // this.dialogVisible = false;
            row.rowEdit = false
            this.getList()
            this.editDisabled = false
          } else {
            this.$message.error(res.data.message)
          }
        })
        return false
      }
      const _this = this

      addSupplierWare(this.poesList).then((res) => {
        if ((res.code === '200')) {
          this.$message.success(res.data.message)

          _this.dialogVisible = false
          _this.suppliersList = ''
          _this.getList()
        }
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then((excel) => {
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        const filterVal = [
          'id',
          'title',
          'author',
          'pageviews',
          'display_time'
        ]
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    handleClick(tab) {
      var state = ''
      if (tab.index === '0') {
        state = ''
        this.isSettleDelete = false
        this.showCheckboxDownload = false
      } else if (tab.index === '1') {
        state = '0,1,2'
        this.isSettleDelete = false
        this.showCheckboxDownload = true
      } else if (tab.index === '2') {
        state = '3'
        this.isSettleDelete = true
        this.showCheckboxDownload = false
      } else if (tab.index === '3') {
        state = '4'
        this.isSettleDelete = false
        this.showCheckboxDownload = false
      }
      this.listQuery.state = state
      this.getList()
    },
    getRowKey(row) {
      return row.id
    },
    downloadSettlement() {
      generateSettlement({ 'ids': this.idsPo }).then(res => {
        this.settlementDownloadList = res.data.data

        this.settlementDownloadList.map(item => {
          item.checkedStyle = ''
        })

        this.settlementDownloadList.forEach(item => {
          this.actualTotalTime += Number(item.supplierSettlementDetail.actualTimeLength)
        })
      })

      this.showDownloadSettlement = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val

      const res = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((r) => {
          res.push(r.id)
        })
        this.idsPo = res.join(',')
      }
    },
    selectStyle(item, event) {
      this.actualTotalPrice = 0

      const opt = event.target
      let totalPrice = 0
      if (item.checkedStyle === '1') {
        totalPrice = item.supplierSettlementDetail.unitPrice * item.supplierSettlementDetail.quantity
      } else if (item.checkedStyle === '2') {
        totalPrice = item.supplierSettlementDetail.unitPrice * item.supplierSettlementDetail.actualTimeLength
      }
      opt.parentElement.nextElementSibling.innerText = totalPrice

      // 修改并显示总金额
      this.itemsPrice[item.supplierSettlementDetail.id] = totalPrice

      // 遍历对象，并计算总金额
      for (const obj of Object.entries(this.itemsPrice)) {
        this.actualTotalPrice += obj[1]
      }
    },
    downloadExcel() {
      // 更新状态
      updateSettleState({
        ids: this.idsPo,
        state: 3
      }).then(res => {
        if (res.data.code === 200) {
          this.multipleSelection = ''
          this.idsPo = ''
          this.getList()
        }
      })

      // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
      var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById('tableExcel').outerHTML + '</body></html>'
      // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
      var blob = new Blob([html], { type: 'application/vnd.ms-excel' })
      var a = document.getElementById('download')
      // 利用URL.createObjectURL()方法为a元素生成blob URL
      a.href = URL.createObjectURL(blob)
      // 设置文件名
      a.download = '结算清单.xls'

      // 隐藏对话框
      this.showDownloadSettlement = false
    }
  }
}
</script>

<style lang="scss" scoped>
.part1 span{
  text-align: left;
}

.el-form-item{
  margin-bottom: 15px;
}
.flex-box{
  display: flex;
  .flex-iten3{
    flex: 3;
  }
  .flex-iten2{
    flex: 2;
  }
  .flex-iten{
      flex: 1;
      .el-radio{
        margin-right:15px
      }
  }
}

.el-rate{
  line-height: 2;
}
.label-30 .el-form-item__label {
  width: 30px !important;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.settle_table {
  border-collapse: collapse;

  tr {
    height: 50px;
    text-align: center;
  }

  td,
  th {
    border: 1px solid #000;
  }
}
h2 {
  text-align: center;
  margin-bottom: 30px;
}
.settle_name {
  font-size: 16px;
  margin-bottom: 15px;

  span:first-child {
    font-weight: bolder;
  }
}
.settleStyle {
  width: 80%;
  height: 30px;
  line-height: 30px;
}
input[type='text'] {
  width: 70px;
  height: 30px;
  line-height: 30px;
}
</style>
